<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="images/favicon.ico">

    <title>lafengmaker</title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="/css/carousel.css" rel="stylesheet">
    

    <!-- Custom styles for this template -->
   

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
      <script src="../../docs-assets/js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
    function turn90(){
    	 src=$("[class='item active'] .carousel-caption img").attr("src")
    	 window.location="/blog/turn90?p="+src
    }
    
    
    </script>
  </head>
  <body>
  <!-- Carousel
    ================================================== -->
    {% include "top.html" %}
     <div class="container" style="width: 1470px">
      <div class="jumbotron">
    <div id="myCarousel" class="carousel slide" data-ride="carousel" >
      <!-- Indicators -->
      
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
      {% for f in fl %}
      		{% if forloop.first  %}
        <div class="item active">
          <img data-src="holder.js/1170x650/auto/#777:#7a7a7a/text:First slide" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
            <img alt="xx" src="/showimg/{{f.url}}" height="{{f.y}}" width="{{f.x}}">
            </div>
          </div>
        </div>
        	{% else %}
        <div class="item">
          <img data-src="holder.js/1170x650/auto/#777:#7a7a7a/text:First slide" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
            <img alt="xx" src="/showimg/{{f.url}}" height="{{f.y}}" width="{{f.x}}">
            </div>
          </div>
        </div>
        	{% endif %}
       {% endfor %}
      </div>
      <a class="btn btn-primary" style="margin-left: 600px;" onclick="turn90()">旋转90度</a>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!-- /.carousel -->
    </div>
    </div>
      <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

      <!-- Three columns of text below the carousel -->
      		 <div class="row">
       {% for f in fl %}
      		 <div class="col-lg-2">
      		 <img class="img-thumbnail" data-target="#myCarousel" src="/showimg/{{f.url}}" data-slide-to="{{forloop.counter0}}" style="width:140px; height: 140px" height="140" width="140">
      		 </div>
       {% endfor %}
      		 </div>
      <hr class="featurette-divider">
    </div><!-- /.container -->
    {% include "footer.html" %}
     <script src="/js/jquery-1.10.2.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/holder.js"></script>
    <!-- Button trigger modal -->
  <a data-toggle="modal hide" href="#myModal" class="btn btn-primary btn-lg hide">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  </body>
  </html>